<template>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="item.path">
        {{ item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </template>
  
  <script setup>
  import { useRoute } from 'vue-router';
  import { computed } from 'vue';
  
  const route = useRoute();
  
  const breadcrumbList = computed(() => {
    // 如果路由有自定义的面包屑配置，使用自定义配置
    if (route.meta.breadcrumb) {
      return route.meta.breadcrumb;
    }
  
    // 否则使用默认的面包屑生成逻辑
    const list = [];
    let currentRoute = route;
    
    // 添加父级路由的面包屑
    if (currentRoute.matched && currentRoute.matched.length > 1) {
      const parentRoute = currentRoute.matched[currentRoute.matched.length - 2];
      if (parentRoute.meta && parentRoute.meta.breadcrumb) {
        return parentRoute.meta.breadcrumb.concat([{
          title: currentRoute.meta.title,
          path: currentRoute.path
        }]);
      }
    }
  
    // 默认逻辑
    while (currentRoute) {
      if (currentRoute.meta && currentRoute.meta.title) {
        list.unshift({
          title: currentRoute.meta.title,
          path: currentRoute.path
        });
      }
      currentRoute = currentRoute.parent;
    }
    return list;
  });
  </script>
  
  <style scoped>
  /* 可以根据需要添加样式 */
  </style>